<template>
  <div class="message">
  <el-card class="box-card" shadow="never">
    <div v-for="(item,index) in rows" :key="item.id" class="text item">
      <div class="circle"></div><div class="check" @click="toCheck(item)">查看</div>
      <span>{{item.username}}</span><span>{{item.state}}</span><span v-if="item.state=='未通过'">{{item.evaluate}}</span><div class="messagetime">{{item.createTime}}</div>
      <p>{{item.workDescribe}}</p>
      <el-divider v-if="index!=rows.length-1"></el-divider>
    </div>
  </el-card>
  </div>
</template>

<script>
import * as api from '@/js/workTimeApi'
export default {
  name:'message',
  data(){
    return {
      rows:[]
     };
   },
  mounted(){
    this.rows=[]
    api.getNormalUserMessage({makeStatus:false}).then(res => {
      for(let data in res.data.rows){
        res.data.rows[data].state='未通过'
        this.rows.push(res.data.rows[data])
      }
    })
    api.getPowerUserMessage().then(res => {
      // console.log(res)
      for(let data in res.data.rows){
        res.data.rows[data].state='未确认'
        this.rows.push(res.data.rows[data])
      }
    })
  },
  methods: {
    toCheck(item){
      if(item.state=='未确认'){
        this.$router.push({
          name: 'makework',
        })
      }
      if(item.state=='未通过'){
        this.$router.push({
          name: 'addwork',
        })
      }
    }
  },
  watch: {}
 }

</script>
<style lang='scss' scoped>
.message{
  margin-top: 20px;
  width: 85%;
  height: 80vh;
  background: #FFFFFF;
}
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    position: relative;
    border: none;
    .circle{
      margin-top: 8.5px;
      position: absolute;
      height: 5px;
      width: 5px;
      background: red;
      border-radius: 50%;
    }
    .check{
      position: absolute;
      margin-top: 7.5px;
      right: 20px;
      font-size: 10px;
      color: skyblue;
      &:hover{
        cursor: pointer;
      }
    }
    span:nth-child(3){
      color: #739FEA;
      font-size: 13px;
      font-weight: bold;
      margin-left: 10px;
    }
    span:nth-child(4){
      margin-left: 9px;
      color: #666666;
      font-size: 11px;
    }
    span:nth-child(5){
      font-size: 11px;
      color: red;
    }
    p{
      padding-right: 10px;
      padding-top: 10px;
      max-width: 80%;
      height: auto;
      font-weight: bold;
      color: #739FEA;
      font-size: 13px;
    }
  }
  .messagetime{
    position: absolute;
    right: 20px;
    font-size: 11px;
    color: #999999;
    margin-top: 12px;
  }
  .el-divider{
    margin: 15px 0;
    background: 0 0;
    border-top: 1px solid #eeeeee;
  }
</style>